<template>
  <div class="page-content">
    <div class="header">
      <h3>网站设置</h3>
    </div>

    <el-form label-width="195px" style="margin-top: 20px">
      <!-- 1. 基础展示设置 -->
      <div class="group-section">
        <h4>基础展示设置</h4>
        <el-form-item label="是否展示朋友圈">
          <el-switch :active-value="1" :inactive-value="0" v-model="sys.cfg_open_qun" active-text="开启" inactive-text="关闭" :disabled="!isEdit" />
        </el-form-item>
        <el-form-item label="是否展示群成员列表">
          <el-switch :active-value="1" :inactive-value="0" v-model="sys.cfg_show_qun_member_list" active-text="开启" inactive-text="关闭" :disabled="!isEdit" />
        </el-form-item>
      </div>

      <!-- 2. APP 显示设置 -->
      <div class="group-section">
        <h4>APP 显示设置</h4>
        <el-form-item label="默认app语言">
          <el-select v-model="sys.cfg_app_language" placeholder="请选择语言" :disabled="!isEdit" style="width: 240px">
            <el-option label="简体中文" value="zh-CN" />
            <el-option label="繁體中文" value="zh-TW" />
            <el-option label="英文" value="en" />
          </el-select>
        </el-form-item>
        <el-form-item label="默认app名字">
          <el-input v-model="sys.cfg_app_name" :disabled="!isEdit" />
        </el-form-item>
        <el-form-item label="默认logo">
          <el-upload
            class="avatar-uploader"
            :action="uploadUrl"
            :show-file-list="false"
            :disabled="!isEdit"
            :on-success="handleLogoSuccess"
            :before-upload="beforeLogoUpload"
          >
            <img v-if="sys.cfg_app_logo" :src="sys.cfg_app_logo" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon" />
          </el-upload>
        </el-form-item>
        <el-form-item label="默认app显示图标">
          <el-upload
            class="avatar-uploader"
            :action="uploadUrl"
            :show-file-list="false"
            :disabled="!isEdit"
            :on-success="handleIconSuccess"
            :before-upload="beforeLogoUpload"
          >
            <img v-if="sys.cfg_app_icon" :src="sys.cfg_app_icon" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon" />
          </el-upload>
        </el-form-item>
      </div>

      <!-- 3. 消息过滤设置 -->
      <div class="group-section">
        <h4>消息过滤设置</h4>
        <el-form-item label="群系统消息过滤词">
          <el-input v-model="sys.cfg_filter_system_rule" :disabled="!isEdit" />
        </el-form-item>
        <el-form-item label="群文本消息过滤词">
          <el-input v-model="sys.cfg_filter_text_rule" :disabled="!isEdit" />
        </el-form-item>
      </div>

      <!-- 4. 网页跳转设置 -->
      <div class="group-section">
        <h4>网页跳转设置</h4>
        <el-form-item label="是否开启网页跳转">
          <el-switch :active-value="1" :inactive-value="0" v-model="sys.cfg_open_weburl" active-text="开启" inactive-text="关闭" :disabled="!isEdit" />
        </el-form-item>
        <el-form-item label="网页跳转标题">
          <el-input v-model="sys.cfg_weburl_title" :disabled="!isEdit" />
        </el-form-item>
        <el-form-item label="网页跳转logo">
          <el-upload
            class="avatar-uploader"
            :action="uploadUrl"
            :show-file-list="false"
            :disabled="!isEdit"
            :on-success="handleWebLogoSuccess"
            :before-upload="beforeLogoUpload"
          >
            <img v-if="sys.cfg_weburl_logo" :src="sys.cfg_weburl_logo" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon" />
          </el-upload>
        </el-form-item>
        <el-form-item label="网页跳转地址">
          <el-input v-model="sys.cfg_weburl" :disabled="!isEdit" />
        </el-form-item>
        <el-form-item label="客服地址">
          <el-input v-model="sys.cfg_kefu_url" :disabled="!isEdit" />
        </el-form-item>
      </div>

      <!-- 5. 自动化操作设置 -->
      <div class="group-section">
        <h4>自动化操作设置</h4>
        
        <el-form-item label="自动加群类型">
          <el-switch active-value="normal" inactive-value="chaoqun" v-model="sys.cfg_qun_type" active-text="普通群" inactive-text="自炒群" :disabled="!isEdit" />
        </el-form-item>
        <el-form-item label="选择炒群脚本(如果炒群)">
          <el-select
            v-model="sys.cfg_use_jiaoben_id"
            placeholder="请选择脚本"
            :disabled="!isEdit"
            style="width: 240px"
          >
            <el-option
              v-for="item in jiaoben"
              :key="item.id"
              :label="item.jiaoben_name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="是否自动加普通群">
          <el-switch :active-value="1" :inactive-value="0" v-model="sys.cfg_is_auto_join_qun" active-text="开启" inactive-text="关闭" :disabled="!isEdit" />
        </el-form-item>
        <el-form-item label="是否自动加人">
          <el-switch :active-value="1" :inactive-value="0" v-model="sys.cfg_is_auto_add_member" active-text="开启" inactive-text="关闭" :disabled="!isEdit" />
        </el-form-item>
        <el-form-item label="自动加群IDs">
          <el-input v-model="sys.cfg_auto_qun_ids" :disabled="!isEdit" />
        </el-form-item>
        <el-form-item label="自动加人IDs">
          <el-input v-model="sys.cfg_auto_member_ids" :disabled="!isEdit" />
        </el-form-item>
        <el-form-item label="自动加群欢迎语句">
          <el-input v-model="sys.cfg_qun_welcome" :disabled="!isEdit" />
        </el-form-item>
        <el-form-item label="自动加人欢迎语句">
          <el-input v-model="sys.cfg_member_welcome" :disabled="!isEdit" />
        </el-form-item>
      </div>

      <!-- 6. 权限与互动设置 -->
      <div class="group-section">
        <h4>权限与互动设置</h4>
        <el-form-item label="普通人是否可以互相添加好友">
          <el-switch :active-value="1" :inactive-value="0" v-model="sys.cfg_add_friends" active-text="开启" inactive-text="关闭" :disabled="!isEdit" />
        </el-form-item>
        <el-form-item label="非好友之间是否可以通话">
          <el-switch :active-value="1" :inactive-value="0" v-model="sys.cfg_friends_say" active-text="开启" inactive-text="关闭" :disabled="!isEdit" />
        </el-form-item>
        <el-form-item label="普通人是否可以创建群">
          <el-switch :active-value="1" :inactive-value="0" v-model="sys.cfg_create_qun" active-text="开启" inactive-text="关闭" :disabled="!isEdit" />
        </el-form-item>
      </div>

      <!-- 操作按钮 -->
      <el-form-item>
        <el-button type="primary" style="width: 90px" @click="edit">
          {{ isEdit ? '保存' : '编辑' }}
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { getGroupConfigApi,updateGroupConfigApi,getJiaoBenByGroupIdApi } from "@/api/ImChat";
import { getGroupId } from "@/utils/auth";
import {baseUrl,webImageUrl} from "@/utils/config.js";

export default {
  data() {
    return {
      sys: {
        cfg_app_logo: '',
        cfg_app_icon: '',
        cfg_weburl_logo: '',
        cfg_use_jiaoben_id: null,
      },
      jiaoben:{},
      isEdit: true,
      uploadUrl: baseUrl+'/upload/image',
    };
  },
  mounted() {
    this.getJiaoBenByGroupId()
    this.getGroupConfig()
  },
  methods: {
    getGroupConfig() {
      const data = { groupid: getGroupId() };
      getGroupConfigApi(data).then(res => {
        this.sys = res.data;
      });
    },
    getJiaoBenByGroupId() {
      const data = { groupid: getGroupId() };
      getJiaoBenByGroupIdApi(data).then(res => {
        this.jiaoben = res.data.list;
      });
    },
    handleLogoSuccess(res) {
      this.sys.cfg_app_logo = webImageUrl + res.data[0];
    },
    handleIconSuccess(res) {
      this.sys.cfg_app_icon = webImageUrl + res.data[0];
    },
    handleWebLogoSuccess(res) {
      this.sys.cfg_weburl_logo = webImageUrl + res.data[0];
    },
    beforeLogoUpload(file) {
      const isImage = file.type.startsWith('image/');
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isImage) this.$message.error('只能上传图片格式!');
      if (!isLt2M) this.$message.error('图片大小不能超过 2MB!');
      return isImage && isLt2M;
    },
    edit() {
      if (!this.isEdit) {
        this.isEdit = true;
        return;
      }

      const postData = {
        ...this.sys,
        groupid: getGroupId(), // 确保携带 groupid
      };

      updateGroupConfigApi(postData).then(res => {
        if (res.code === 200) {
          this.$message.success('保存成功');
          this.isEdit = false;
        } else {
          this.$message.error(res.msg || '保存失败');
        }
      }).catch(() => {
        this.$message.error('请求失败，请检查网络或稍后再试');
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.page-content {
  width: 100%;
  height: 100%;

  .header {
    padding-bottom: 15px;
    border-bottom: 1px solid #eee;

    h3 {
      font-size: 17px;
      font-weight: 500;
    }
  }

  /deep/ .el-form .el-form-item {
    max-width: 700px;
  }
}

.avatar-uploader {
  width: 100px;
  height: 100px;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;

  .el-icon-plus {
    font-size: 28px;
    color: #8c939d;
    width: 100%;
    height: 100%;
    line-height: 100px;
    text-align: center;
  }

  .avatar {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
  }
}

.group-section {
  background-color: #f9f9f9;
  padding: 20px;
  margin-bottom: 20px;
  border-radius: 6px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);

  h4 {
    font-size: 15px;
    font-weight: 600;
    color: #333;
    margin-bottom: 16px;
    padding-left: 10px;
    border-left: 4px solid #409EFF;
  }
}
</style>
